<!--
 * @Author: houmin 745762351@qq.com
 * @Date: 2023-09-11 09:50:52
 * @LastEditors: houmin 745762351@qq.com
 * @LastEditTime: 2023-12-05 03:02:08
 * @FilePath: \tch-h5\src\views\hotel-detail\HotelDetail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <Header title="我的年卡" :back="true" path="/" />
  <div class="my-card">
    <template v-if="cardList.length>0" >
      <div
        class="card"
        v-for="(item, index) in cardList"
        :key="index"
        @click="router.push(`/panda-details?cardId=${item.cardId}`)"
      >
        <img
          src="../../assets/images/oneCard/gold-card.png"
          height="200"
          width="100%"
          alt=""
          style="width: 100%"
        />
        <p class="mt10 flex-between">
          <span class="fz14 text-orange blod">持卡人：{{ item.name }}</span
          ><span class="text-orange"
            >有效日期至：{{ changeDate(item.expireTime) }}</span
          >
        </p>
        <p>
          <span class="blod fz14">身份证：{{ item.idCardNo }}</span>
        </p>
      </div>
    </template>
    <div class="no-data" v-else>
      <img src="../../assets/images/icons/no-data.png" width="56" alt="" />
      <p>暂无数据</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Header from "@/components/header/Header.vue";
import api from "@/api/index.js";
import { useRouter } from "vue-router"; //路由跳转
const router = useRouter(); //路由跳转

const cardList = ref([]);
const getCard = () => {
  api.getMyCard().then((res) => {
    cardList.value = res.data;
    //  console.log(cardList.value )
  });
};

const changeDate = (val) => {
  const dateString = val;
  const dateParts = dateString?.split(" ")?.[0].split("-");
  const day = dateParts?.[2];
  const month = dateParts?.[1];
  const year = dateParts?.[0];
  const formattedDate = year ? `${year}-${month}-${day}`:'-';
  return formattedDate;
};

onMounted(() => {
  getCard();
});
</script>

<style lang="scss" scoped>
.my-card {
  width: 100%;
  height: 100%;
  background: url("../../assets/images/oneCard/bg.png") no-repeat;
  background-size: contain;
  text-align: center;
  padding: 1rem 0;
  margin-bottom: 2rem;
  overflow-y: auto;
  .no-data {
    padding-top: 25vh;
    font-size: 1.2rem;
    color: rgba(139, 139, 139, 1);
    p {
      margin-top: 1rem;
    }
  }
  .card {
    overflow: hidden;
    background-color: #ffffff;
    border-radius: 1rem;
    padding: 1rem;
    margin: 1.5rem;
    box-shadow: 2px 2px 6px rgba(189, 189, 189, 0.7);
    p {
      text-align: left;
      line-height: 1.5;
    }
  }
}
</style>